<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>评论详情框</title>
    <!-- 使用BootCDN提供的Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#commentModal">
    查看评论详情
</button>

<!-- 模态对话框 -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">评论详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- 设置弹窗独立滑动条 -->
            <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                <!-- 动态填充评论内容 -->

                <p id="commentDetail">这是评论的具体内容...</p>

                <div class="panel panel-danger">
                    <div class="panel-body">评论列表</div>
                    <div id="first">

                        {% for comment_ in comments %}
                            {% for comment in comment_ %}
                                {% if comment.parent is not None %}
                                    <span style="display:block;text-indent:2em;"> {{ comment.content }}</span>
                                    <span style="display:block;text-indent:2em;">{{ comment.post_time }} user：{{ comment.author.username }} to {{ comment.parent.author.username }}</span>
                                    <hr>
                                {% else %}
                                    <span> {{ comment.content }}</span>
                                    <span>{{ comment.post_time }} user：{{ comment.author.username }}</span>
                                    <hr>
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 使用BootCDN提供的jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<!-- 使用BootCDN提供的Popper.js，用于Bootstrap的某些组件依赖 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 使用BootCDN提供的Bootstrap JS -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    // 假设你从某个地方获取到评论详情并填充到模态框中
    var comment = `工作职责：

1.根据产品和运营需求, 多方位合作, 完成知乎前端研发工作，包括但不限于 PC ，H5、Hybird、SDK，小程序等；

2.在 web 端产品 appHybrid 应用 小程序等一种或多种方向中, 解决开发中遇到的问题；

3.负责前端技术方案的整理和实践, 以及文档化产出, 主导项目落地推动。

任职资格：

1.具备统招本科或以上学历，计算机、数学、通信相关专业优先；

2.对计算机相关基础知识有较好的理解，包括但不限于 OSI 七层模型、TCP/IP 四层模型、基础操作系统、计算机组成原理、数据结构、数据库等；

3.有扎实的前端技术基础，包括但不限于 HTML、CSS、JavaScript、Node.js 等；

4.了解常见的前端框架、库、工具，例如：React / Vue、Webpack / Gulp 等；

5. 有求知欲，热爱学习新知识，了解最新的前端技术动态；

6.自驱力强， 具备良好的沟通能力和合作精神，有责任感。

加分项：

1.有代码洁癖，在乎设计细节，能够发现并及时反馈技术设计、实践中的缺陷；

2.有过深入研究某一方面的前端技术的经验，能够有自己的理解和看法；

3.知乎重度用户；

4.获得过国内外知名技术大赛奖项；

5.有实习经验，熟悉nodeJs；

6.了解跨平台方案，例如RN、Hybrid；

7.有开源作品，GitHub上有独立作品等。`;
    document.getElementById('commentDetail').innerText = comment;
</script>

</body>
</html>